<template>
    <div>
        <h1>{{article.title}}</h1>
        <p>
            <i class="el-icon-user"></i>
            <template>
                <el-link @click="getInfo(article)">{{article.author}}</el-link>
            </template>&emsp;
            <i class="el-icon-time"></i>{{article.createTime}}&emsp;
            <i class="el-icon-view"></i>{{article.viewCount}}&emsp;
            <i class="el-icon-star-off"></i>{{article.likeCount}}&emsp;
            <i class="el-icon-chat-dot-square"></i>{{article.commentCount}}
        </p>
        <hr>
        <p>{{article.content}}</p>
        <hr>
        <el-input type="textarea" v-model="commentContent"></el-input>
        <p>
            <el-button type="primary" @click="addComment()">发布评论</el-button>
            <el-button type="primary" plain @click="likeArticle()" v-if="!article.isLiked">点赞</el-button>
            <el-button type="danger" plain @click="cancelLikeArticle()" v-if="article.isLiked">取消点赞</el-button>
        </p>
        <el-table
            :data="commentsData"
            style="width: 100%">
            <el-table-column
                prop="authorName"
                label="评论人"
                width="180">
                <template slot-scope="scope">
                    <el-link @click="getInfo(scope.row)">{{scope.row.authorName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="content"
                label="内容">
            </el-table-column>
            <el-table-column
                prop="likeCount"
                label="点赞数"
                width="180">
            </el-table-column>
            <el-table-column
                prop="replyCount"
                label="回复数"
                width="180">
                <template slot-scope="scope">
                    <el-link @click="getReply(scope.row)" v-if="scope.row.replyCount>0">{{scope.row.replyCount}}</el-link>
                    <p v-if="scope.row.replyCount===0">0</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="发布时间"
                width="180">
            </el-table-column>
            <el-table-column
                    prop="operate"
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-link @click="handleReplyLink(scope.row)">回复</el-link>&emsp;
                    <el-link @click="likeComment(scope.row)" v-if="!scope.row.isLiked" type="primary">点赞</el-link>
                    <el-link @click="cancelLikeComment(scope.row)" v-if="scope.row.isLiked" type="danger">取消点赞</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!--登录表单-->
        <el-dialog
                title="登录账号"
                :visible.sync="loginVisible"
                width="30%"
        >
            <el-form :model="user" status-icon ref="user" label-width="100px" class="demo-user">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="user.username" placeholder="请输入您的账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" autocomplete="off" placeholder="请输入您的密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="resetForm('user')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--发送回复表单-->
        <el-dialog
                title="回复"
                :visible.sync="replyVisible"
                width="30%"
        >
            <el-form label-width="100px" >
                <el-form-item label="内容" prop="content">
                    <el-input v-model="replyContent" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="replyComment">发送</el-button>
                    <el-button @click="replyContent=''">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--查看回复表单-->
        <el-dialog
                title="查看回复"
                :visible.sync="readReplyVisible">
            <p>
                <el-link @click="getInfo(comment)">{{comment.authorName}}</el-link>:{{comment.content}}
            </p>
            <hr>
            <el-table
                :data="replyData"
                style="width: 100%">
                <el-table-column
                    prop="authorName"
                    label="回复人"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getInfo(scope.row)">{{scope.row.authorName}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="内容">
                </el-table-column>
                <el-table-column
                    prop="likeCount"
                    label="点赞数"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="replyCount"
                    label="回复数"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getReply(scope.row)" v-if="scope.row.replyCount>0">{{scope.row.replyCount}}</el-link>
                        <p v-if="scope.row.replyCount===0">0</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="180">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-link @click="handleReplyLink(scope.row)">回复</el-link>&emsp;
                        <el-link @click="likeReply(scope.row)" v-if="!scope.row.isLiked" type="primary">点赞</el-link>
                        <el-link @click="cancelLikeReply(scope.row)" v-if="scope.row.isLiked" type="danger">取消点赞</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

</template>

<script>
import axios from 'axios';
export default{
    mounted(){
        this.getArticle();
        this.getComments();
    },

    methods:{

        // 获取文章
        async getArticle(){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            axios({
                method:"get",
                url:"http://localhost:8080/article/"+this.$route.params.id,
                headers:{token:jwt}
            }).then(resp => {
                this.article=resp.data.data;
            })
        },
        
        // 获取评论
        async getComments(){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            axios({
                method:"get",
                url:"http://localhost:8080/comment?beCommentedId="+this.$route.params.id+"&beCommentedType=1",
                headers:{token:jwt}
            }).then(resp => {
                this.commentsData=resp.data.data;
            })
        },

        // 获取回复
        async getReply(row){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            this.comment=row;
            this.readReplyVisible=true;
            axios({
                method:"get",
                url:"http://localhost:8080/comment?beCommentedId="+row.id+"&beCommentedType=3",
                headers:{token:jwt}
            }).then(resp => {
                this.replyData=resp.data.data;
            })
        },

        // 检查jwt
        async checkJwt(){
            try {  
                const response = await axios({  
                    method: 'get',  
                    url: 'http://localhost:8080/check/' + localStorage.getItem('token')  
                });  
                return response.data.code;
            } catch (error) {  
                return false; 
            }
        },

        // 添加评论
        async addComment(){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:'post',
                    url:'http://localhost:8080/comment',
                    data:{beCommentedId:this.$route.params.id,beCommentedType:1,content:this.commentContent},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getArticle();
                        this.getComments();
                        this.$message.success('评论成功！');
                    }else{
                        this.$message.error(resp.data.msg);
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
            this.commentContent='';
        },

        // 处理回复链接被点击
        async handleReplyLink(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                this.replyVisible=true;
                this.beRepliedId=row.id;
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
            
        },

        // 回复评论
        replyComment(){
            axios({
                method:'post',
                url:'http://localhost:8080/comment',
                data:{beCommentedId:this.beRepliedId,beCommentedType:3,content:this.replyContent},
                headers:{token:localStorage.getItem('token')}
            }).then(resp => {
                if(resp.data.code){
                    this.replyVisible=false;
                    this.getArticle();
                    this.getComments();
                    this.getReply(this.comment);
                    this.$message.success('回复成功！');
                }else{
                    this.$message.error(resp.data.msg);
                }
                this.replyContent='';
                this.beRepliedId='';
            })
        },

        // 登录方法
        login() {
            axios({
                method:"post",
                url:"http://localhost:8080/login",
                data:this.user
            }).then(resp =>{
                // 判断是否存在
                if(resp.data.code){
                    this.resetForm('user');
                    this.loginVisible = false;
                    localStorage.setItem('token',resp.data.data)
                    this.$message.success("登录成功!");
                    this.getArticle;
                    this.getComments;
                }else{
                    this.$message.error(resp.data.msg);
                    this.resetForm('user');
                    this.loginVisible = false;
                }
            })
        },

         // 获取用户信息方法
         getInfo(row){
            this.$router.push({ path: '/user/'+row.authorId});
        },

        // 点赞文章
        async likeArticle(){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:this.article.id,beLikedType:1},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getArticle();
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                    localStorage.removeItem('token');
                    this.$message.error('请先登录');
                    this.loginVisible=true;
                }
        },
        
        // 取消点赞文章
        async cancelLikeArticle(){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:this.article.id,beLikedType:1},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getArticle();
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                    localStorage.removeItem('token');
                    this.$message.error('请先登录');
                    this.loginVisible=true;
                }
        },

         // 点赞评论
         async likeComment(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments();
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },
        
        // 取消点赞评论
        async cancelLikeComment(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments();
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 点赞回复
        async likeReply(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments();
                        this.getReply(this.comment);
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },
        
        // 取消点赞回复
        async cancelLikeReply(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments();
                        this.getReply(this.comment);
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 重置方法
        resetForm(formName) {
                this.$refs[formName].resetFields();
        },

    },

    data(){
        return{
            // 评论数据
            commentsData:[],
            //回复数据
            replyData:[],
            //登录对话框是否展示的标记
            loginVisible:false,
            //回复对话框是否展示的标记
            replyVisible:false,
            //阅读回复对话框是否展示标记
            readReplyVisible:false,
            //评论内容
            commentContent:'',
            //被回复id
            beRepliedId:'',
            //回复内容
            replyContent:'',
            //文章模型
            article:{
                id:'',
                title:'',
                content:'',
                author:'',
                createTime:'',
                viewCount:'',
                likeCount:'',
                commentCount:'',
                authorId:''
            },
            //评论模型
            comment:{
                id:'',
                content:'',
                authorName:'',
                likeCount:'',
                replyCount:'',
                createTime:'',
                authorId:''
            },
            //用户模型
            user: {
                    username:'',
                    password: '',
                    checkPassword:'',
                    name:'',
                    gender:'',
                    image:'',
                    job:'',
                    address:''
                    },
        }
        
    }
}
</script>